<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '邻里生活荟',
  },
}
</route>

<template>
  <view class="min-h-screen bg-[#f1f1f1] p-4">
    <view class="overflow-y-auto bg-white rounded-lg pt-safe" v-if="article">
      <view class="px-4 py-3">
        <!-- Title -->
        <view class="text-xl font-bold text-gray-900 mb-2">{{ article.newsTitle }}</view>

        <view class="flex items-center text-sm text-gray-500 mb-4">
          <text>{{ formatDate(article.time) }}</text>
          <view class="w-1 h-1 rounded-full bg-gray-300 mx-2"></view>
          <text>{{ article.createBy }}</text>
          <view class="w-1 h-1 rounded-full bg-gray-300 mx-2"></view>
          <i class="iconfont icon-Icon_eyes w-3 text-3 mr-1"></i>
          <text>{{ article.readingVolume }}人已读</text>
        </view>

        <view class="mb-4 overflow-hidden flex flex-col justify-evenly">
          <image v-for="image in parseImageList(article.newsImage)" :key="image" :src="image" :alt="article.newsTitle"
            class="w-full h-48 object-cover rounded-lg mb-1" />
        </view>

        <view class="text-gray-800 leading-relaxed mb-4" v-html="article?.newsContent"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { http } from '@/utils/http'
import dayjs from 'dayjs'

const articleId = ref('')
const article = ref(null)

const getArticle = async () => {
  let res = await http.get('/api/news/getInfo', { id: articleId.value })
  if (res.code === 200) {
    article.value = res.data
  }
}

const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}

const parseImageList = (images) => {
  if (!images) {
    return [] // 或者返回一个默认图片的数组
  }
  return images.split(',')
}

onLoad(({ id }) => {
  articleId.value = id
  getArticle()
})
</script>

<style lang="scss" scoped>
//</style>
